<template>
	<view class="detail-wrapper">
		<!-- 轮播图 -->
		<view class="swiper">
			<image :src="list.cover" mode=""></image>
		</view>

		<view class="boss">
			<view class="left">
				<view class="top">
					￥222
					<span>￥222 </span>
				</view>
				<view class="bot">
					<view class="box-item">
						2人拼团
					</view>
				</view>
			</view>
			<view class="right">
				距结束
				<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<text class="time__custom">{{ timeData.days }}</text>
						<text class="time__doc">天</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
		</view>

		<!-- content -->
		<view class="box">
			<view class="top">
				<view class="zi1">{{list.title}}</view>
			</view>
			<view class="two">
				<view class="left">2 人学过</view>
				<view class="right">
					<u-icon name="star" color="black" size="20"></u-icon>
				</view>
			</view>
			<view class="three">
				￥{{list.price}}
				<span>￥{{list.t_price}} </span>
			</view>
		</view>

		<view class="hh"></view>

		<view class="p">
			课程简介
		</view>
		<view v-html="list.try" class="iiiii"></view>
	</view>
</template>

<script>
	import {
		detailList
	} from '../api/detail.js';
	export default {
		data() {
			return {
				timeData: {},
				list: [],
				gid: "",
			}
		},

		onLoad(e) {
			this.gid = e.id;
			console.log(e.id, "EEEEEEEEEEEEEEEEEEE")
			this.getlist()
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			//获取数据
			async getlist() {
				const res = await detailList(this.gid);
				console.log(res, "详情");
				this.list = res.data.data
			},
		}
	}
</script>

<style lang="scss">
	.detail-wrapper {
		width: 100%;
		height: 100%;

		.boss {
			width: 100%;
			height: 170rpx;
			background-color: #dc3545;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;

			.right {
				font-size: 35rpx;
				color: white;
				display: flex;
				align-items: center;

				.time {
					@include flex;
					align-items: center;

					&__custom {
						margin-top: 4px;
						width: 25px;
						height: 25px;
						background-color: rgb(195, 21, 46);
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #fff;
							font-size: 10px;
							text-align: center;
						}
					}

					&__doc {
						color: white;
						padding: 0px 4px;
						font-size: 28rpx;
					}

					&__item {
						color: white;
						font-size: 30rpx;
						margin-right: 4px;
					}
				}
			}

			.left {
				width: 40%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.top {
					color: white;
					font-size: 40rpx;

					span {
						font-size: 34rpx;
						text-decoration: line-through;
					}
				}

				.bot {
					.box-item {
						width: 200rpx;
						background-color: white;
						color: #dc3545;
						font-size: 30rpx;
						height: 60rpx;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

				}
			}
		}

		.iiiii {
			width: 100%;
			font-size: 30rpx;

			::v-deep img {
				width: 100%;
				height: 100%;
			}
		}

		.swiper {
			width: 100%;
			height: 410rpx;


			image {
				width: 100%;
				height: 100%;
			}

		}

		.box {
			margin-top: 20rpx;
			height: 160rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-around;

			.top {
				font-size: 32rpx;
			}

			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 27rpx;
				color: #a9a5a0;
			}

			.three {
				color: red;
				font-size: 35rpx;

				span {
					font-size: 24rpx;
					color: grey;
				}
			}

		}

		.hh {
			height: 10px;
			background-color: #f5f5f3;
		}

		.p {
			padding: 20rpx;
			width: 100%;
			height: 70rpx;
			font-size: 35rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

		}

	}
</style>
<template>
	<view class="detail-wrapper">
		<!-- 轮播图 -->
		<view class="swiper">
			<image :src="list.cover" mode=""></image>
		</view>

		<view class="boss">
			<view class="left">
				<view class="top">
					￥222
					<span>￥222 </span>
				</view>
				<view class="bot">
					<view class="box-item">
						2人拼团
					</view>
				</view>
			</view>
			<view class="right">
				距结束
				<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<text class="time__custom">{{ timeData.days }}</text>
						<text class="time__doc">天</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
		</view>

		<!-- content -->
		<view class="box">
			<view class="top">
				<view class="zi1">{{list.title}}</view>
			</view>
			<view class="two">
				<view class="left">2 人学过</view>
				<view class="right">
					<u-icon name="star" color="black" size="20"></u-icon>
				</view>
			</view>
			<view class="three">
				￥{{list.price}}
				<span>￥{{list.t_price}} </span>
			</view>
		</view>

		<view class="hh"></view>

		<view class="p">
			课程简介
		</view>
		<view v-html="list.try" class="iiiii"></view>
	</view>
</template>

<script>
	import {
		detail1List
	} from '../api/detail.js';
	export default {
		data() {
			return {
				timeData: {},
				list: [],
				gid: "",
			}
		},

		onLoad(e) {
			this.gid = e.gid;
			console.log(e.gid, "EEEEEEEEEEEEEEEEEEE")
			this.getlist()
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			//获取数据
			async getlist() {
				const res = await detail1List(this.gid);
				console.log(res, "详情");
				this.list = res.data.data
			},
		}
	}
</script>

<style lang="scss">
	.detail-wrapper {
		width: 100%;
		height: 100%;

		.boss {
			width: 100%;
			height: 170rpx;
			background-color: #dc3545;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;

			.right {
				font-size: 35rpx;
				color: white;
				display: flex;
				align-items: center;

				.time {
					@include flex;
					align-items: center;

					&__custom {
						margin-top: 4px;
						width: 25px;
						height: 25px;
						background-color: rgb(195, 21, 46);
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #fff;
							font-size: 10px;
							text-align: center;
						}
					}

					&__doc {
						color: white;
						padding: 0px 4px;
						font-size: 28rpx;
					}

					&__item {
						color: white;
						font-size: 30rpx;
						margin-right: 4px;
					}
				}
			}

			.left {
				width: 40%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.top {
					color: white;
					font-size: 40rpx;

					span {
						font-size: 34rpx;
						text-decoration: line-through;
					}
				}

				.bot {
					.box-item {
						width: 200rpx;
						background-color: white;
						color: #dc3545;
						font-size: 30rpx;
						height: 60rpx;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

				}
			}
		}

		.iiiii {
			width: 100%;
			font-size: 30rpx;

			::v-deep img {
				width: 100%;
				height: 100%;
			}
		}

		.swiper {
			width: 100%;
			height: 410rpx;


			image {
				width: 100%;
				height: 100%;
			}

		}

		.box {
			margin-top: 20rpx;
			height: 160rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-around;

			.top {
				font-size: 32rpx;
			}

			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 27rpx;
				color: #a9a5a0;
			}

			.three {
				color: red;
				font-size: 35rpx;

				span {
					font-size: 24rpx;
					color: grey;
				}
			}

		}

		.hh {
			height: 10px;
			background-color: #f5f5f3;
		}

		.p {
			padding: 20rpx;
			width: 100%;
			height: 70rpx;
			font-size: 35rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

		}

	}
</style>
